<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:s="http://jboss.com/products/seam/taglib"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:ctg="http://www.crotouristguide.com/taglib"
	xmlns:rich="http://richfaces.org/rich">

<ui:component>
	<rich:panel id="weatherWidget">
		<f:facet name="header">
			<h:outputLink value="#" id="lnkWeather" styleClass="special1">
				<h:outputText value="#{messages['label.link.vrijeme']}" />
			</h:outputLink>
		</f:facet>
		<h:form>
			<a4j:region renderRegionOnly="true">
				<a4j:outputPanel ajaxRendered="true">
					<ctg:status />
					<s:div id="weather">
						<table width="93%">
							<tr>
								<td><h:selectOneMenu value="#{weatherService.city}"
									onclick="return false;">
									<f:selectItems value="#{cities}" var="c"></f:selectItems>
									<a4j:support event="onchange" />
								</h:selectOneMenu></td>

								<td><h:graphicImage
									value="http://www.worldweather.org/img_cartoon/pic#{liveWeather.kod}.gif" />
								</td>
								<td><h:outputText styleClass="temperature"
									value="#{liveWeather.temperaturaZraka} &#176;C" /></td>
							</tr>
							<tr>
								<td colspan="3">
									<h:outputLabel value="#{messages['label.desc']}: " /> <h:outputText styleClass="text11" value="#{liveWeather.opis}" />
								</td>
							</tr>
						</table>					
					</s:div>
				</a4j:outputPanel>
			</a4j:region>
		</h:form>
	</rich:panel>
	
	<div id="pnlWeather" class="popup">
	<h:panelGrid columns="2" width="100%">
		<s:div id="wtabs" style="margin-right:10px">
			<ul>
				<li><a href="#wtabs-1"><span><h:outputText
					value="#{messages['label.croatia.today']}" /></span></a></li>
				<li><a href="#wtabs-2"><span><h:outputText
					value="#{messages['label.croatia.tomorrow']}" /></span></a></li>
			</ul>

			<s:div id="wtabs-1">
				<h:graphicImage value="http://prognoza.hr/hrdanas.jpg"
					alt="#{messages['label.image.alt']}" />
			</s:div>
			<s:div id="wtabs-2" styleClass="display:none;">
				<h:graphicImage value="http://prognoza.hr/hrsutra.jpg"
					alt="#{messages['label.image.alt']}" />
			</s:div>
		</s:div>
		<h:panelGroup> 
			<h:form id="weather">
				<a4j:region renderRegionOnly="true">
					<a4j:outputPanel ajaxRendered="true">
						<ctg:status />
						<h:outputText value="#{messages['label.choose.place']}" />
						<br />
						<h:selectOneMenu value="#{weatherService.city}">
							<f:selectItems value="#{cities}" var="c"></f:selectItems>
							<a4j:support event="onchange" />
						</h:selectOneMenu>
						<br />
						<br />
						<s:div styleClass="leftm">
							<h:graphicImage
								value="http://www.worldweather.org/img_cartoon/pic#{liveWeather.kod}.gif" />
						</s:div>
						<s:div styleClass="leftm">
							<span class="temperature"><h:outputText
								value="#{liveWeather.temperaturaZraka}C" /> </span>
							<br />
							<h:outputText value="#{liveWeather.opis}" />
						</s:div>
						<br class="clearb" />
						<br />
						<table>
							<tr>
								<td><b>#{messages['label.humidity']}:</b></td>
								<td>#{liveWeather.relativnaVlaznost} %</td>
							</tr>
							<tr>
								<td><b>#{messages['label.pressure']}:</b></td>
								<td>#{liveWeather.tlakZraka} hPa</td>
							</tr>
							<tr>
								<td><b>#{messages['label.windspeed']}:</b></td>
								<td>#{liveWeather.brzinaVjetra} m/s</td>
							</tr>
							<tr>
								<td><b>#{messages['label.sea.temp']}:</b></td>
								<td>#{liveWeather.temperaturaMora} C</td>
							</tr>
							<tr>
								<td><b>#{messages['label.sunrise']}:</b></td>
								<td>#{stringUtil.formatDate("dd.MM.yyyy
								HH:mm:ss",liveWeather.izlazakSunca)}</td>
							</tr>
							<tr>
								<td><b>#{messages['label.sunset']}:</b></td>
								<td>#{stringUtil.formatDate("dd.MM.yyyy
								HH:mm:ss",liveWeather.zalazakSunca)}</td>
							</tr>
							<tr>
								<td><b>#{messages['label.last.update']}:</b></td>
								<td>#{stringUtil.formatDate("dd.MM.yyyy
								HH:mm:ss",liveWeather.vrijemeObjave)}</td>
							</tr>
						</table>
						<br />
						<h3><h:outputText value="#{messages['title.forecast']}"
							rendered="#{weather.forecast.size() > 0}" /></h3>
						<h:dataTable value="#{weather.forecast}" var="f" styleClass="top">
							<h:column>
								<h:graphicImage alt="#{messages['label.image.alt']}"
									value="http://www.worldweather.org/img_cartoon/pic#{f.kod}.gif"
									width="25" height="25" />
							</h:column>
							<h:column>
								<h:outputText
									value='#{stringUtil.formatDate("dd.MM.yyyy",f.dan)}: #{f.minTemperatura} C - #{f.maxTemperatura} C' />
							</h:column>
						</h:dataTable>
					</a4j:outputPanel>
				</a4j:region>
			</h:form>
		</h:panelGroup>
	</h:panelGrid>
	</div>
	
	<script type="text/javascript"> 
	 jQuery(function() {	 
		 jQuery('#lnkWeather').click(function() {
			new Boxy('#pnlWeather',{title:'#{messages['label.weather']}',modal:true}).resize(750,450);
			jQuery("#wtabs").tabs().show();
			return false; 
		 });
	 
	 });
	 </script>
</ui:component>
</html>